<template>
  <div>
    <h1>template ref 与 TS</h1>
    <input type="text" ref="target">
  </div>
</template>

<script setup lang="ts">
/**
 * ref获取元素
 * 1. 提供数据const target = ref(null)
 * 2. 给元素添加ref属性 <h1 ref="target"></h1>
 * 3. target.value获取元素
 * 
 * input框  挂载的时候让他聚焦
 */
import { onMounted, ref } from 'vue';
// 初始值是null 等元素挂载后类型就会变成 HTMLInputElement
//这是因为直到组件被挂载前，这个 ref 的值都是初始的 null，并且在由于 v-if 的行为将引用的元素卸载时也可以被设置为 null。
const target = ref<null | HTMLInputElement>(null)
onMounted(() => {
  // 类型断言 必须是要你确定，你断言后ts就不管你了就是你说的对
  // 注意这里要用可选链，因为如果input框上绑了v-if，v-if为false时就卸载了，input元素就不在了
  target.value?.focus()
})
</script>

<style scoped>

</style>
